<p>
  员工信息管理 <button class="addStaff" nz-button nzType="primary" nzGhost  (click)="addStaff()"><i class="anticon anticon-plus"></i>新增员工</button>
</p>
<nz-modal [(nzVisible)]="isVisible" nzTitle="" nzWrapClassName="vertical-center-modal" nzWidth="350" nzClosable="false" (nzOnCancel)="delNo()" (nzOnOk)="delYes()">
    <nz-input-group>
      你确定删除员工{{staffName}}吗？
    </nz-input-group>
  </nz-modal>
  <nz-modal [(nzVisible)]="staffAdd" nzTitle="" nzWrapClassName="vertical-center-modal" nzWidth="350" nzClosable="false" (nzOnCancel)="addcalcel()" (nzOnOk)="addSave()">
    <nz-input-group [nzSuffix]="nameTemplate" nzPrefixIcon="anticon anticon-user-add">
      <input type="text" nz-input placeholder="请输入员工姓名" [(ngModel)]="staffName">
    </nz-input-group>
      <nz-select style="width: 302px;" [(ngModel)]="staffSex" class="marginTop" nzAllowClear nzPlaceHolder="请选择员工性别">
        <nz-option nzValue="男" nzLabel="男"></nz-option>
        <nz-option nzValue="女" nzLabel="女"></nz-option>
      </nz-select>
      <nz-input-group [nzSuffix]="ageTemplate" class="marginTop" nzPrefixIcon="anticon anticon-user-add">
        <input type="text" nz-input placeholder="请输入员工年龄" [(ngModel)]="staffAge">
      </nz-input-group>
      <nz-input-group [nzSuffix]="phoneTemplate" class="marginTop" nzPrefixIcon="anticon anticon-tablet">
        <input type="text" nz-input placeholder="请输入员工电话" [(ngModel)]="staffPhone">
      </nz-input-group>
      <nz-input-group [nzSuffix]="timeTemplate" class="marginTop" nzPrefixIcon="anticon anticon-clock-circle-o">
        <input type="text" nz-input placeholder="请输入员工入职时间" [(ngModel)]="staffTime">
      </nz-input-group>
      <nz-input-group [nzSuffix]="positionTemplate" class="marginTop" nzPrefixIcon="anticon anticon-shop">
        <input type="text" nz-input placeholder="请输入员工当前职位" [(ngModel)]="staffPosition">
      </nz-input-group>
      <nz-select style="width: 302px;" [(ngModel)]="staffStatus" class="marginTop" nzAllowClear nzPlaceHolder="请选择员工当前状态">
        <nz-option nzValue="0" nzLabel="准备就绪"></nz-option>
        <nz-option nzValue="1" nzLabel="收到指令"></nz-option>
        <nz-option nzValue="2" nzLabel="外派中"></nz-option>
        <nz-option nzValue="3" nzLabel="已到店"></nz-option>
      </nz-select>
      <nz-select style="width: 302px;" [(ngModel)]="staffCity" class="marginTop" nzAllowClear nzPlaceHolder="请选择员工所在城市">
        <nz-option *ngFor="let city of cityData" [nzValue]="city.cityName" [nzLabel]="city.cityName"></nz-option>
      </nz-select>
 
    <ng-template #nameTemplate><i class="anticon anticon-close-circle" (click)="staffName=null" *ngIf="staffName"></i></ng-template>
    <ng-template #ageTemplate><i class="anticon anticon-close-circle" (click)="staffAge=null" *ngIf="staffAge"></i></ng-template>
    <ng-template #phoneTemplate><i class="anticon anticon-close-circle" (click)="staffPhone=null" *ngIf="staffPhone"></i></ng-template>
    <ng-template #timeTemplate><i class="anticon anticon-close-circle" (click)="staffTime=null" *ngIf="staffTime"></i></ng-template>
    <ng-template #positionTemplate><i class="anticon anticon-close-circle" (click)="staffPosition=null" *ngIf="staffPosition"></i></ng-template>
  </nz-modal>
<div nz-row>
  <div nz-col nzSpan="24">
    <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10">
      <thead>
        <tr>
          <th nzShowExpand></th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>电话</th>
          <th>入职时间</th>
          <th>当前职位</th>
          <th>所在城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
          <tr>
            <td nzShowExpand [(nzExpand)]="data.expand"></td>
            <td>{{data.staffName}}</td>
            <td>{{data.staffSex}}</td>
            <td>{{data.staffAge}}</td>
            <td>{{data.staffPhone}}</td>
            <td>{{data.staffTime}}</td>
            <td>{{data.staffPosition}}</td>
            <td>{{data.staffCity}}</td>
            <td><i class="anticon anticon-edit iconEdit" title="修改" (click)="edit(data)"></i><nz-divider nzType="vertical"></nz-divider><i class="anticon anticon-delete iconDel" title="删除" (click)="del(data)"></i></td>
          </tr>
          <tr [nzExpand]="data.expand">
            <td colspan="10">
              <nz-steps [nzCurrent]="data.staffStatus" [nzStatus]="data.statusType">
                <nz-step nzTitle="准备就绪"  nzIcon="anticon anticon-user"></nz-step>
                <nz-step nzTitle="收到指令"  nzIcon="anticon anticon-solution"></nz-step>
                <nz-step nzTitle="外派中"  nzIcon="anticon anticon-spin anticon-loading"></nz-step>
                <nz-step nzTitle="已到店" [nzIcon]="iconTemplate"></nz-step>
                <ng-template #iconTemplate><i class="anticon anticon-smile-o"></i></ng-template>
              </nz-steps>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </nz-table>
  </div>
</div>